<template>
	<view class="" style="min-height: 100vh;padding: 0 30rpx;"
		:style="{background:'url('+Imgbase+'/new_goodmy_bgc.png)','background-size':'100%',}">
		<view class="zinde">
			<view class="" style="padding: 105rpx 20rpx 0;position: relative;z-index: 99999;" @click="back">
				<image class="w-80 h-80 margin-top-10" :src="Imgbase + '/new_goodlx_img1.png'" mode="aspectFit"></image>
			</view>
			<view class="title">
				<image class="w-300 h-100" :src="Imgbase + '/new_goodranking_img1.png'" v-if="id == 0" mode="aspectFit">
				</image>
				<image class="w-300 h-100" :src="Imgbase + '/new_goodranking_img6.png'" v-else mode="aspectFit"></image>
			</view>
		</view>

		<view class="w-690 h-1400 margin-auto"
			:style="{background:'url('+Imgbase+'/new_goodranking_img2.png)','background-size':'100% 100%',}">
			<view class="toptime df radius-10 alc Cfont font-30 padding-top-25 padding-left-80">
				<view class="text  padding-left-15 padding-right-25">
					距离重置倒计时:
				</view>
				<view class=" font-weight-500">
					<u-count-down :time="timestamp" @change="onChange">
						<view class="time df alc">
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeData.hours>9?timeData.hours:'0'+timeData.hours}}</text>
							</view>
							<text class="time__doc padding-left-5 padding-right-5">:</text>
							<view class="time__custom">
								<text
									class="time__custom__item ">{{ timeData.minutes>9?timeData.minutes:'0'+timeData.minutes}}</text>
							</view>
							<text class="time__doc padding-left-5 padding-right-5">:</text>
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeData.seconds>9?timeData.seconds:'0'+timeData.seconds}}</text>
							</view>
						</view>
					</u-count-down>
				</view>
			</view>

			<scroll-view scroll-y class="w100 h-1350 padding-left-20 padding-top-100" scroll-with-animation
				style="overflow: hidden;">
				<view class="padding-30 margin-top-20 radius-15 w-620 h-185 margin-auto" v-for="(item,index) in list"
					:key="index"
					:style="{background:'url('+Imgbase+'/new_goodranking_img4.png)','background-size':'100% 100%',}">
					<view class="flex-between">
						<view class="font-weight-500 font-28 Afont h-100 two-line" style="width: 70%; color: #643504;">
							{{item.name}}
						</view>
						<!-- <view class="fff font-weight-500 font-32 w-150 h-80 flex-center radius-40"
							:class="consume/item.consume >1 && item.is_receive ==0?'open':'no_open'"
							@click="receiveReward(item.id)">
							领取
						</view> -->
						<view class="" @click="receiveReward(item.id)" v-if="id == 0">
							<image v-if="consume/item.consume >=1 && item.is_receive ==0" class="w-115 h-50"
								@click="receiveReward(item.id)" :src="Imgbase + '/new_goodranking_img3_c.png'"
								mode="aspectFit"></image>
							<image v-else class="w-115 h-50" :src="Imgbase + '/new_goodranking_img3.png'"
								mode="aspectFit">
							</image>
						</view>
						
						<view class="" @click="receiveReward(item.id)" v-else>
							<image v-if="consume/item.money >=1 && item.is_receive ==0" class="w-115 h-50"
								@click="receiveReward(item.id)" :src="Imgbase + '/new_goodranking_img3_c.png'"
								mode="aspectFit"></image>
							<image v-else class="w-115 h-50" :src="Imgbase + '/new_goodranking_img3.png'"
								mode="aspectFit">
							</image>
						</view>
					</view>

					<view class="" style="position: relative;">
						<view class="bot df alc" style="position: relative;z-index: 5;">
							<view class="">
								<image class="w-50 h-25" :src="Imgbase + '/new_goodranking_img5.png'" mode="aspectFit">
								</image>
							</view>

							<view class="h-30" style="width: 80%;position: relative;margin: 0 15rpx;" v-if="id == 0">
								<view class="rate">
									<view class="font-18 Afont black-color text h100 w100 text-center">
										{{consume/100}}/{{item.consume/100}}
									</view>
									<view class="rate_one" :style="[{ width:consume/item.consume*100 + '%'}]">

									</view>
								</view>
							</view>
							
							<view class="h-30" style="width: 80%;position: relative;margin: 0 15rpx;" v-else>
								<view class="rate">
									<view class="font-18 Afont black-color text h100 w100 text-center">
										{{consume/100}}/{{item.money/100}}
									</view>
									<view class="rate_one" :style="[{ width:consume/item.money*100 + '%'}]">
							
									</view>
								</view>
							</view>


						</view>
					</view>
				</view>
				<view class="h-100">

				</view>
			</scroll-view>



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				timestamp: 0,
				timeData: {},
				list: [],
				consume: 0,
				id: 0 // 0 消费 --- 1 充值
			}
		},
		onLoad(e) {
			console.log(e.id)
			if (e.id == 1) {
				this.id = e.id
				this.taskList()
			} else {
				this.id = 0
				this.taskList()
			}
		},
		onShow() {},
		methods: {
			back() {
				uni.navigateBack()
			},
			async receiveReward(e) {
				let url = ''

				if (this.id == 1) {
					url = 'rank/receiveRechargeCase'
				} else {
					url = 'rank/receiveReward'
				}

				let item = await this.$api.post(url, {
					token: uni.getStorageSync('token'),
					task_id: e
				})
				if (item.code == 1) {
					uni.showToast({
						icon: 'none',
						title: '领取成功'
					});
				}
				this.taskList()
			},
			// 列表
			async taskList(e) {
				const now = new Date();
				const currentTimestamp = now.getTime();
				const nextDayZero = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1).getTime();
				const secondsUntilNextDayZero = Math.floor((nextDayZero - currentTimestamp) / 1000);
				this.timestamp = parseInt(secondsUntilNextDayZero) * 1000

				let url = ''

				if (this.id == 1) {
					url = 'rank/rechargeTaskList'
				} else {
					url = 'rank/taskList'
				}

				let item = await this.$api.post(url, {
					token: uni.getStorageSync('token')
				})
				this.list = item.data.list
				
				if (this.id == 1) {
					this.consume = item.data.recharge
				} else {
					this.consume = item.data.consume
				}
				console.log(consume)
			},
			onChange(e) {
				this.timeData = e
			},
			goback() {
				uni.navigateBack()
			},
		},
	}
</script>

<style lang="less" scoped>
	.open {
		background-color: #F78D51;
		color: #fff;
	}

	.no_open {
		background-color: #eee;
		color: #6c6c6c;
	}

	.rate {
		width: 100%;
		height: 30rpx;
		background-color: #EBEBEB;
		border-radius: 15rpx;
		display: flex;
		overflow: hidden;
		border: solid 4rpx rgba(161, 91, 37, 0.9);
		position: relative;

		.text {
			position: absolute;
		}

		.rate_one {
			background-color: #2B9C35;
			height: 100%;
			transition: .5s;
			flex-shrink: 0;
			border-radius: 15rpx;
		}

	}


	.toptime {
		color: #F9FADA;

		.text {}
	}

	.zinde {
		position: relative;
		z-index: 99;

		.title {
			position: absolute;
			width: 100%;
			text-align: center;
			top: 115rpx;
			color: #fff;
			font-size: 40rpx;
			font-weight: bold;
			text-shadow: 6rpx 6rpx 6rpx #3b3b3b;
		}
	}
</style>